bootstrap - responsive layout

不久之前，我们只是为PC做页面。比如经典的左中右结构网页布局就可以使用bootstrap直接搞定：

<nav class="container">
    <section class="row">
        <div  class="col-md-2">
            left
        </div>
        <div  class="col-md-8">
         middle
        </div>
        <div  class="col-md-2">
          right
        </div> 
    </section>
</nav>

在进一步解释之前，我们首先背下来一个事实：bootstrap布局系统会把每个屏划分为12等分。并提供划分这个等分的方法。

然后继续。每个.container的容器内都可以加入.row作为行，在行内通过col-md-来指定划分每个子元素的占据宽度。解释下col-md- :

1. col-md-*采用连字符分为三个部分，第一部分都是col，标识列

2. 第二部分标识屏幕大小。md标识middle（中等屏幕大小）

3. 最后一部分是一个在12内的数字，它表示在总宽度下，当前元素占据的比例。比如col-md-2指定为2/12，col-md-8标识占据8/12。

这段代码的含义，换成白话就是：在中等屏幕大小的情况下，三个div块分别占据当前行总宽度的2/12、8/12、2、12。

屏幕大小使用代号，全面屏幕和代号列表如下：

屏     代号 范围            
大屏幕  lg  大于等于1200px
中等屏  md 宽度在992px和1200px之间
小屏幕  sm  宽度大于768px和992px之间
超小屏  xs  宽度小于768px

所以，几个屏幕大小的临界点值为768px、992px、1200px。

这个左中右结构，在小屏情况下就会显得太挤了（比如ipad的竖屏情况下屏宽刚刚好768px）。此时我希望把前两个div占据一行，分别占据3/12、9/12 ,第3个div放到下一行。怎么办？只要使用col-sm-*来指定比例即可：

 <nav class="container">
    <section class="row">
        <div  class="col-sm-3 col-md-2">
            left
        </div>
        <div  class="col-sm-9 col-md-8">
         middle
        </div>
        <div  class="col-sm-12 col-md-2">
          right
        </div> 
    </section>
</nav>

就是说，在小屏幕的情况下，第一个div占据第一行的3/12，第二个div占据第一行的9/12，第三个div占据下一个的12/12。

如何验证这样做的效果确实是如我的期望呢？现在隆重请出chrome devtools。只要：

1. 打开devtools

2. 点击toggle device toolbar

就可以打开页面，它会在原来的页面上方加入一行，显示responsible的下拉菜单以及设备的宽度和高度输入框。我们可以在设备宽度输入框内填写我们想要的设备宽度。并使用768px、992px做边界值测试。

• 当输入768px时，此时为小屏幕，页面输出如期望的分为2行。

• 当输入769px时，此时为小屏幕，页面输出如期望的分为2行。

• 当输入767px时，此时为超小屏幕，页面输出如期望的分为3行。

• 当输入992px时，此时为中等屏幕，页面输出如期望的分为1行。

• 当输入1200px时，此时为超大屏幕，因为并没有定义超大屏幕下的占据比例，它会沿用上一级屏幕的定义，也就是中等屏幕的定义，页面输出如期望的依然为1行。

成了。我们的页面可以因应屏幕的大小而显示不同的页面组合。这就是响应式编程了。